<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>博客列表</title>
    <link rel="stylesheet" href="css/conmmon.css">
    <link rel="stylesheet" href="css/blog_list.css">
    <script src="js/jquery.min.js"></script>
</head>

<style>
    .content{
            width: 300px;
            height: calc(100% - 80px);
            /* border: 1px solid red; */
            background-color: #FFFFFF;
            border-radius: 10px;
            /* position: relative; */
            /* display: flex; */
            float: left;
            margin-left: 10px;
            overflow-x: hidden;
            overflow-y: scroll;
            background-color: rgba(255, 255, 255, 0.8);
            position: relative;
            
    
        }

    .baixue{
            width: 250px;
            height: 30px;
            margin: 10px;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            justify-content: space-between;
            /* border: 1px solid red; */
    }

    .cleanNoti{
        position: relative;
        bottom: 0px;
       
    }

    .content a{
        
        text-decoration: none;
    }
 
    .aaa{
        flex-direction: row;
    }
 
    #notification {
        margin-left: 10%;
        font-size: 30px;
        color: black;
        font-weight: 900;
    }
    #history {
        font-size: 15px;
        color: grey;
        font-weight: 900;
    }
    


</style>

<body>
    <!-- 导航栏 -->
    <div class="nav">
        <img src="img/logo2.jpg" alt="">
        <span class="title">我的博客系统</span>
        <!-- 用来占据中间位置 -->
        <span class="spacer"></span>
        <a href="blog_list.html">主页</a>
        <a href="blog_add.html">写博客</a>
        <a href="mydraft_list.html">草稿</a>
        <a href="javascript:logout()">注销</a>
        <a href="personal_center.html">个人中心</a>
        <!-- <a href="#">注销</a> -->
    </div>
    <!-- 版心 -->
    <div class="container">
        <!-- 左侧个人信息 -->
        <div class="container-left">
            <div class="card">
                <img src="img/doge.jpg" id="photo" class="avtar" alt="">
                <h3 id="username"></h3>
                <div class="counter"> 
                    <a href="http:www.github.com" id="github">github 地址</a>
                </div>
               
                <div class="counter">
                    <span>文章</span>
                    <span>分类</span>
                </div>
                <div class="counter">
                    <span id="artCount">0</span>
                    <span>1</span>
                </div>
            </div>
        </div>
        <!-- 右侧内容详情 -->
        <div id="artDiv" class="container-right">
    
            <!-- 每一篇博客包含标题, 摘要, 时间 -->
            <div class="blog">
                <div class="title">我的第一篇博客</div>
                <div class="date">2021-06-02</div>
                <div class="desc">
                    从今天起, 我要认真敲代码. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Cum distinctio ullam eum ut
                    veroab laborum numquam tenetur est in dolorum a sint, assumenda adipisci similique quaerat vel.
                    Facere,
                    et.
                </div>
                <a href="blog_content.html?id=1" class="detail">查看全文 &gt;&gt;</a>
                <a href="blog_edit.html" class="detail">修改 &gt;&gt;</a>
                <a href="blog_content.html?id=1" class="detail">删除 &gt;&gt;</a>
            </div>
           
        </div>

         <!-- 通知 -->
         <div class="content" id="contentright">
            <a id="notification" href="javascript:notification()">通知</a>&nbsp;&nbsp;
            <a id="history" href="javascript:history()">历史通知</a>
            <div class="baixue" id="delArticle">
                <span id="imformation">您的某篇文章已被管理员删除</span>
                <span id="delTime">2023-9-21</span>
                <div class="aaa"><a href="javascript:recover(此评论id)">恢复为草稿</a>
                <a href="javascript:recover(此评论id)">删除</a></div>
               
              
                <span id="imformation">您的某篇文章已被管理员删除</span>
                <span id="delTime">2023-9-21</span>
                <a href="javascript:recover(此评论id)">恢复为草稿</a>
                <a href="javascript:recover(此评论id)">删除</a>

                <span id="imformation">您的某篇文章已被管理员删除</span>
                <span id="delTime">2023-9-21</span>
                <a href="javascript:recover(此评论id)">恢复为草稿</a>
                <a href="javascript:recover(此评论id)">删除</a>
              
                <span id="imformation">您的某篇文章已被管理员删除</span>
                <span id="delTime">2023-9-21</span>
                <a href="javascript:recover(此评论id)">恢复为草稿</a>
                <a href="javascript:recover(此评论id)">删除</a>

                <span id="imformation">您的某篇文章已被管理员删除</span>
                <span id="delTime">2023-9-21</span>
                <a href="javascript:recover(此评论id)">恢复为草稿</a>
                <a href="javascript:recover(此评论id)">删除</a>
              
                <span id="imformation">您的某篇文章已被管理员删除</span>
                <span id="delTime">2023-9-21</span>
                <a href="javascript:recover(此评论id)">恢复为草稿</a>
                <a href="javascript:recover(此评论id)">删除</a>

                <span id="imformation">您的某篇文章已被管理员删除</span>
                <span id="delTime">2023-9-21</span>
                <a href="javascript:recover(此评论id)">恢复为草稿</a>
                <a href="javascript:recover(此评论id)">删除</a>
              
                <span id="imformation">您的某篇文章已被管理员删除</span>
                <span id="delTime">2023-9-21</span>
                <a href="javascript:recover(此评论id)">恢复为草稿</a>
                <a href="javascript:recover(此评论id)">删除</a>

                <span id="imformation">您的某篇文章已被管理员删除</span>
                <span id="delTime">2023-9-21</span>
                <a href="javascript:recover(此评论id)">恢复为草稿</a>
                <a href="javascript:recover(此评论id)">删除</a>
              
                <span id="imformation">您的某篇文章已被管理员删除</span>
                <span id="delTime">2023-9-21</span>
                <a href="javascript:recover(此评论id)">恢复为草稿</a>
                <a href="javascript:recover(此评论id)">删除</a>


              <div class="cleanNoti" id="cleanAll">
                <a href="javascript:cleanAll(此评论id)">清空</a>
             </div>
            </div>

            
            
        </div>
        
    

    </div>

    <script>

        //获取左侧个人信息
        function showInfo(){
            jQuery.ajax({
                url:"/user/showinfo",
                type:"POST",
                data:{},
                success:function(result){
                    if(result!=null && result.code == 200){
                    
                        jQuery("#photo").attr("src",result.data.photo);
                        jQuery("#github").attr("href",result.data.github);
                        jQuery("#github").text(result.data.github);
                        jQuery("#username").text(result.data.username); 
                        jQuery("#artCount").text(result.data.artCount); 

                    }else{
                        alert("个人信息加载失败，请刷新");
                    }
                }
            });
        }
        showInfo();


        //获取文字列表页面
        function getMyArtList(){
            jQuery.ajax({
                url:"/art/mylist",
                type:"POST",
                data:{},
                success:function(result){
                    if(result!=null && result.code==200){
                        //两种情况，一种发表了文章，一种没有发表文章
                        if(result.data!=null && result.data.length>0){
                            //用户发表了文章
                            //每次循环
                            var artListDiv = "";
                            for(var i=0;i<result.data.length;i++){
                                var artItem = result.data[i];
                                artListDiv += '<div class="blog">';
                                artListDiv += '<div class="title">' + artItem.title+'</div>';
                                artListDiv += '<div class="date">' + artItem.updatetime+'</div>';
                                artListDiv += '<div class="desc">';
                                artListDiv += artItem.content;
                                artListDiv += '</div>';
                                artListDiv += '<a href="blog_content.html?id='+artItem.id + ' " class="detail"> 查看全文 &gt;&gt;</a> ';
                                artListDiv += '<a href="blog_edit.html?id='   +artItem.id + ' " class="detail"> 修改 &gt;&gt;</a> ';
                                artListDiv += '<a href="javascript:myDel('    +artItem.id + '); " class="detail"> 删除 &gt;&gt;</a> ';
                                artListDiv += '</div>';

                            }
                            jQuery("#artDiv").html(artListDiv);



                        }else{
                            //当前用户没有发表任何文章
                            jQuery("#artDiv").html("<h3>暂无文章<h3>");
                        
                        }


                    }else{
                        alert("查询失败，请重试");
                    }
                }
            });

        }
        getMyArtList();



        //一到这个页面就判断自己的文章是否被管理员删除了
        function articleIfDel(){
            jQuery.ajax({
                url:"/admin/articleByDel",
                type:"POST",
                data:"",
                success:function(result){
                    var artListDiv = "";
                    for(var i = 0;i<result.data.length;i++){
                        
                        //文章被管理员删除，管理员审核文章不通过，管理员审核文章通过，根据state展示
                        artListDiv += "<span>"+ (i+1) + result.data[i].descripe + "</span>";
                        artListDiv += "<span>  "+ result.data[i].delTime + " </span>";
                        artListDiv += "<div class=\"aaa\"><a href=\"javascript:recover("+ result.data[i].aid+")\">恢复为草稿</a>&nbsp&nbsp&nbsp";
                        artListDiv += '<a href="javascript:deleteNoti('+ result.data[i].aid+','+ '\'' + result.data[i].superTable +'\''+ ','+ result.data[i].state +',' + '\'' + result.data[i].title +'\'' +')"> 删除 </a></div><br> ';

                    }
                    if(artListDiv!=""){
                        artListDiv += "<a href=\"javascript:cleanAll()\">清空</a>";
                    }
                    jQuery("#delArticle").html(artListDiv);

                
                
                }
            });


        }
        articleIfDel();

        //点击通知超链接
        function notification(){
            //更改历史超链接的属性
            var his = document.getElementById("history");
            var noti = document.getElementById("notification");
            his.style.fontSize="15px";
            his.style.fontWeight="900";
            his.style.color="grey";


            noti.style.fontSize="30px";
            noti.style.fontWeight="900";
            noti.style.color="black";


            //获取通知信息
            articleIfDel();


        }
          //点击历史通知超链接
          function history(){
            //更改历史超链接的属性
            var his = document.getElementById("history");
            var noti = document.getElementById("notification");
            his.style.fontSize="30px";
            his.style.fontWeight="900";
            his.style.color="black";


            noti.style.fontSize="15px";
            noti.style.fontWeight="900";
            noti.style.color="grey";
 
            //获取历史通知信息,本质上是从数据库表中查找state为2的数据
            jQuery.ajax({
                url:"/admin/historyNoti",
                type:"POST",
                data:"",
                success:function(result){
                    var artListDiv = "";
                    for(var i = 0;i<result.data.length;i++){
                        artListDiv += "<span>"+ (i+1) + result.data[i].content + " </span>";
                        artListDiv += "<span>  "+ result.data[i].time + " </span><br>";
                    }
                    jQuery("#delArticle").html(artListDiv);
                }
            });

        }




        //将删除的文章存到草稿表里面
        function recover(id){
            //传到后端文章id，根据文章id找到对应文章，再把这个文章作为草稿存到草稿表中

            //校验id的合法性
            if(id<=0){
                alert("存入草稿错误");
                return;
            }
            //向后端发送数据
            jQuery.ajax({
                url:"/art/addDelArticleToDraft",
                type:"POST",
                data:{"id":id},
                success:function(result){
                    if(result!=null && result.code==200 && result.data==1){
                            alert("恢复为草稿成功");
                        }else{
                            alert("恢复为草稿失败，请稍后重试");
                        }
                }
            });



        }



        //将通知清除
        function cleanAll(){
            //将delarticle 表中的当前用户的数据的state字段的值改为2，表示已经删除
            if(confirm("您确定要清除所有通知吗？")){
                // 清楚所有通知
                jQuery.ajax({
                    url:"/art/cleanAll",
                    type:"POST",
                    data:{},
                    success:function(result){
                        if(result!=null && result.code==200 && result.data!=""){
                            alert("清除成功");
                            articleIfDel();
                        }else{
                            alert("清除失败，请稍后重试");
                        }
                    }
                });
            }


        }


        function deleteNoti(aid,superTable,state,title){
            if(confirm("您确定要删除此条通知吗？")){
                // 清楚所有通知
                jQuery.ajax({
                    url:"/art/deleteNoti",
                    type:"POST",
                    data:{"aid":aid,"superTable":superTable,"state":state,"title":title},
                    success:function(result){
                        if(result!=null && result.code==200 && result.data!=""){
                            alert("清除成功");
                            articleIfDel();
                        }else{
                            alert("清除失败，请稍后重试");
                        }

                    }
                });
            }
        }




        //删除文章
        function myDel(id){
            if(confirm("确实是否删除？")){
                // 删除文章
                jQuery.ajax({
                    url:"/art/del",
                    type:"POST",
                    data:{"id":id},
                    success:function(result){
                        if(result!=null && result.code==200 && result.data==1){
                            alert("删除成功");
                            location.href = location.href;
                        }else{
                            alert("删除失败，请重试");
                        }

                    }
                });
            }
        }

 
        //退出登录
        function logout(){
            if(confirm("确认注销？")){
                jQuery.ajax({
                    url:"/art/logout",
                    type:"POST",
                    data:{},
                    success:function(result){
                        if(result!=null && result.code == 200){
                            location.href = "/login.html";
                        }
                    }
                });
            }
        }



    </script>




</body>

</html>